<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>marker</title>
  </head>
  <body>
    <!-- 
    - <marker> 元素用于创建 <line> 、 <path> 、 <polyline> 或 <polygon> 的起始、中间和结束标记。
    - <marker> 有 6 个基本属性用于定位和设置标记的大小
      - id: id
      - markerWidth: 标记的宽度，默认3
      - markerHeight: 标记的高度，默认3
      - refX: 标记与顶点连接的 x 位置。默认值为 0
      - refY: 标记与顶点连接的 y 位置。默认值为 0
      - orient: 标记的方向
  -->
    <svg
      width="350"
      height="250"
      viewBox="0 0 350 250"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <marker id="circle" refX="5" refY="5" markerWidth="8" markerHeight="8">
          <circle cx="5" cy="5" r="3" style="fill: black" />
        </marker>
        <marker
          id="arrow"
          refX="5"
          refY="5"
          markerWidth="10"
          markerHeight="10"
          orient="auto"
        >
          <path d="M0,0 L10,5 L0,10 Z" style="fill: black" />
        </marker>
      </defs>
      <line
        x1="10"
        y1="10"
        x2="300"
        y2="200"
        stroke="red"
        stroke-width="3"
        marker-start="url(#circle)"
        marker-end="url(#arrow)"
      />
      <!-- 
        - <defs> 元素包含两个标记：一个 #circle 标记和一个 #arrow 标记
        - 标记的形状在 <marker> 元素中定义
        - 第一个 <marker> 元素包含一个 <circle> 元素，该元素绘制一个小圆圈
        - 第二个 <marker> 元素包含一个 <path> 元素，该元素绘制一个小三角形
        - <line> 元素引用了具有 marker-start 属性和 marker-end 属性的两个标记
      -->
    </svg>
  </body>
</html>
